import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Divider, Spin } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;

// const FormItem = Form.Item;
@connect(({ remitclaim, loading }) => ({
  remitclaim,
  loading: loading.models.remitclaim,
}))
@Form.create()
class RemitClaimDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { remitId } = location.query;
    dispatch({
      type: 'remitclaim/fetchRemitDetail',
      payload: { remitId },
    });
  }

  render() {
    const {
      remitclaim: { remitDetail },
      loading,
    } = this.props;
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card title="汇款单数据">
            <DescriptionList>
              <Description term="汇款单编号">{remitDetail.clmRemit.remiCode || '--'}</Description>
              <Description term="汇款人名称">{remitDetail.clmRemit.payName || '--'}</Description>
              <Description term="汇款银行">{remitDetail.clmRemit.remiCode || '--'}</Description>
              <Description term="汇款金额（元）">{remitDetail.clmRemit.amount || '--'}</Description>
              <Description term="可认领金额（元）">
                {remitDetail.clmRemit.nonRemiAmount || '--'}
              </Description>
              <Description term="汇款类别">{remitDetail.clmRemit.remiType || '--'}</Description>
              <Description term="汇款单状态">
                {remitDetail.clmRemit.remiTypeName || '--'}
              </Description>
              <Description term="银行日期">{remitDetail.clmRemit.bankDate || '--'}</Description>
              <Description term="汇款单发布时间">
                {remitDetail.clmRemit.releTime || '--'}
              </Description>
            </DescriptionList>
          </Card>
          {!!remitDetail.clmRcrdList.length && (
            <Card title="认领记录">
              {remitDetail.clmRcrdList.map((item, i) => (
                <DescriptionList key={item.clmRcrdId}>
                  <Description term="供应商名称">{item.beClmName || '--'}</Description>
                  <Description term="客户">{item.beClmName || '--'}</Description>
                  <Description term="姓名">{item.beClmName || '--'}</Description>
                  <Description term="认领金额（元）">{item.clmAmo || '--'}</Description>
                  <Description term="认领人员">{item.creName || '--'}</Description>
                  {remitDetail.clmRcrdList.length === i + 1 ? null : <Divider dashed />}
                </DescriptionList>
              ))}
            </Card>
          )}
        </Spin>
        <FooterToolbar style={{ width: '100%' }}>
          <Button
            onClick={() => {
              router.goBack();
            }}
          >
            返回
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default RemitClaimDetail;
